<template>
  <view v-if="shenheStatus == 0" class="integralDetail">
    <view
      class="detailBox"
      v-for="(item, index) in detailList"
      :key="index"
      @click="goDetail(item)"
    >
      <view class="detail">
        <view class="type">
          <text>订单号:{{ item.order_no }}</text>
          <text
            >支付时间：{{
              $utils.formatDate(new Date(item.pay_time * 1000))
            }}</text
          >
          <text>支付金额：¥{{ item.pay_price }}</text>
          <!-- <text>赠送金额：¥{{ item.send_price }}</text>
          <text>赠送积分：{{ item.send_integral }}</text>
          <text>支付类型：{{ payTypeWord(item.pay_type) }}</text> -->
        </view>
      </view>
    </view>
    <view style="padding: 30rpx 0">
      <u-loadmore :status="noMore ? 'nomore' : 'loadmore'" />
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
export default {
  components: {
    Shenhe,
  },
  data() {
    return {
      page: 1,
      noMore: false,
      detailList: [],
    };
  },
  computed: {
    //   0:微信，2:货到付款，3:余额，4:支付宝
    payTypeWord() {
      return (pay_type) => {
        const Pay_Trans = {
          1: this.$t("common.payMethod1"),
          2: this.$t("common.payMethod2"),
          3: this.$t("common.payMethod3"),
          4: this.$t("common.payMethod4"),
        };
        return Pay_Trans[pay_type] || null;
      };
    },
  },
  onLoad() {
    this.getList();
  },
  methods: {
    // 获取详情列表
    async getList(isBottom) {
      // 已经到底
      if (this.noMore) return;

      try {
        const res = await this.$allrequest.user.rechargeOrder({
          pageNo: this.page,
        });
        if (res.code != 0) throw res;
        let { list, totalCount } = res.data;
        // 触底更新数据
        if (isBottom) {
          this.page++;
        }

        this.detailList.push(...list);
        if (this.detailList.length >= totalCount) {
          this.noMore = true;
        }
      } catch (e) {
        //TODO handle the exception
      }
    },

    goDetail({
      order_no,
      pay_time,
      send_price,
      send_integral,
      pay_type,
      pay_price,
      id,
    }) {
      this.$utils.toUrl(
        `/recharge/item?order_no=${order_no}&pay_time=${pay_time}&send_price=${send_price}&send_integral=${send_integral}&pay_type=${pay_type}&pay_price=${pay_price}&id=${id}`,
        "navigate"
      );
    },
  },
  onReachBottom() {
    this.getList(true);
  },
};
</script>

<style lang="scss" scoped>
.integralDetail {
  width: 100%;
  min-height: 100vh;
  background-color: #f2f2f2;
  padding: 10rpx;
}
.detailBox {
  margin-top: 10rpx;
  width: 100%;
  padding-left: 36rpx;
  background-color: #fff;
  .detail {
    padding: 24rpx 36rpx 24rpx 0;
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 4px;
    .type {
      width: 500rpx;
      max-width: 500rpx;
      display: flex;
      flex-direction: column;
      font-family: PingFang SC;
      font-size: 28rpx;
      color: #262626;
      text:nth-child(1) {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      text:nth-child(2) {
        font-size: 24rpx;
        color: #8c8c8c;
        margin-top: 4rpx;
      }
    }
    .count {
      font-size: 36rpx;
      color: #262626;
      font-weight: 600;
    }
  }
}
.detailBox:last-child {
  .detail {
    border-bottom: none;
  }
}
</style>
